<template>
  <div class="swiper">
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      v-if="slides.length"
    >
      <van-swipe-item v-for="l in slides" :key="l.url">
          <img :src="l.url" alt="">
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script lang='ts'>
import { IGlobalState } from '@/store';
import { SET_SLIDER_LIST } from '@/store/action-types';
import { computed, defineComponent } from 'vue';
import { useStore } from 'vuex';

export default defineComponent({
  async setup() {
    // 一般获取数据都是在父组件获取 这里是为了演示Suspense
    let store = useStore<IGlobalState>();
    let slides = computed(() => store.state.home.slides);
    if (slides.value.length == 0) {
      // 希望等待他完成来展示组件
      await store.dispatch(`home/${SET_SLIDER_LIST}`);
    }
    return {
      slides,
    };
  },
});
</script>

<style lang="scss" scoped>
.my-swipe{
  height:150px;
  position: relative;
  z-index: -1;
    img{
        width:100%;
        height:100%
    }
}
</style>